<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col group_1">
				<text class="text_1">上传定稿施工图</text>
				<view class="flex-col group_2">
					<view class="grid">
						<shop-upload :maxCount="9" :fileList="fileList" @del="delectPic" @success='success'>
						</shop-upload>
					</view>
				</view>
				<text class="text_2">注：展示最终确认的施工图</text>
			</view>
			<view class="flex-col group_3">
				<text class="text_3">施工图</text>
				<view class="flex-col group_4 pic">
					<image v-for="(item,index) in fileList" :src="item.url" style="width: 214rpx; height:214rpx">
					</image>
				</view>
			</view>
			<view class="flex-col items-center button" @click="save"><text class="text_4">保存</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				fileList: [],
				overviewConstructionUrl: '',
				id: '',
				fileListSG: [],
				state: '',
				list: '',
				stateType: ''
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.state = option.state;
			this.ordersId = option.ordersId;
			if (this.state) {
				this.getpic();
			}
			if (option.stateType) {
				this.stateType = option.stateType
			}
		},
		methods: {
			getpic() {
				this.$http('mine.ordersEXL', {
					ordersId: this.ordersId
				}).then(res => {
					// console.log(res,'res')
					if (res.code == 200) {
						if (res.data.inspection.completePictures) {
							let arr = res.data.inspection.completePictures.split(',');
							for (var i = 0; i < arr.length; i++) {
								this.fileList.push({
									url: arr[i]
								})
							}
						}
						// if(res.data.inspection.pictures){
						// 	let arr2 = res.data.inspection.pictures.split(',');
						// 	for(var i=0;i<arr2.length;i++){
						// 		this.fileListSG = [{
						// 			url:arr2[i]
						// 		}]
						// 	}
						// 	// console.log(this.fileListSG)
						// }

					}
				})
			},
			delectPic(index) {
				this.fileList.splice(index, 1);
			},
			delectPicSG(index) {
				this.fileListSG.splice(index, 1);
			},
			success(file) {
				if(file.size > 1024 * 6000) {
					this.$u.toast('图片过大,请重新选择图片进行上传!')
					
				}else {
					this.fileList.push({
						url: file.url
					})
					console.log(this.fileList);
				}
				
			},
			successSG(file) {
				console.log(file);
				this.fileListSG.push({
					url: file.url
				})
				// console.log(this.fileListSG);
			},
			updateOrdersStatus() {
				this.$http('mine.updateOrdersStatus', {
					ordersId: this.ordersId,
					ordersStatus: '3'
				}).then(res => {
					if (res.code == 200) {

					}
				})
			},
			save() {
				if (this.fileList.length == 0) {
					this.$u.toast('请上传设计图纸');
					return;
				}
				let arr = [];
				let arr2 = [];
				this.fileList.map(item => {
					arr.push(item.url)
				})
				this.fileListSG.map(item => {
					arr2.push(item.url)
				})
				let overviewConstructionUrl = arr.join(",");
				let pic = arr2.join(",");
				this.$http('explan.pictureXJ', {
					inspectionId: this.id,
					completePictures: overviewConstructionUrl,
					pictures: pic
				}).then(res => {
					console.log(res, 'res')
					if (res.code == 200) {
						if (!this.stateType) {
							// this.updateOrdersStatus();
						}
						let pages = getCurrentPages(); // 当前页面
						let beforePage = pages[pages.length - 2]; // 前一个页面
						uni.navigateBack({
							delta: 1,
							success: function() {
								beforePage.$vm.init();
							}
						});
						// uni.navigateBack({
						// 	delta:1
						// })
					}
				});
			}
		},
	};
</script>

<style scoped lang="scss">
	.grid-item {
		border-radius: 8px;
		width: 107px;
		height: 107px;
	}

	.page {
		background-color: #ffffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.pic {

		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 214rpx;
		grid-gap: 20rpx;
	}

	.group {
		padding: 0 11px 20px 16px;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.group_1 {
		padding: 14.5px 0 20px;
		border-bottom: solid 0.5px #eeeeee;
	}

	.group_3 {
		padding-top: 15px;
	}

	.button {
		margin-right: 5px;
		margin-top: 28px;
		height: 88rpx;
		background-color: #1d6aff;
		border-radius: 22px;
	}

	.text_1 {
		align-self: flex-start;
		color: #191919;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}

	.group_2 {
		margin-top: 17px;
		padding-top: 5px;
		position: relative;
	}

	.text_2 {
		margin-top: 14.5px;
		align-self: flex-start;
		color: #fe4a4a;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		line-height: 14px;
	}

	.text_3 {
		align-self: flex-start;
		color: #191919;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}

	.group_4 {
		margin-top: 17px;
	}

	.text_4 {
		color: #ffffff;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		display: flex;
		align-items: center;
		height: 100%;
	}

	.grid {
		margin-right: 5px;
		/* height: 231rpx; */
		/* display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 18px;
    column-gap: 12px; */
	}

	.image_5 {
		width: 16px;
		height: 16px;
		position: absolute;
		left: 96px;
		top: 0;
	}

	.image_6 {
		width: 16px;
		height: 16px;
		position: absolute;
		right: 118px;
		top: 0;
	}

	.image_7 {
		width: 16px;
		height: 16px;
		position: absolute;
		right: 0;
		top: 0;
	}

	.image_8 {
		width: 16px;
		height: 16px;
		position: absolute;
		left: 96px;
		bottom: 96px;
	}

	.equal-division {
		margin-right: 5px;
	}

	.image_12 {
		margin-top: 12px;
		align-self: flex-start;
	}

	.grid-item_1 {
		width: 107px;
		height: 107px;
	}

	.image_9 {
		flex: 1 1 107px;
	}

	.image_10 {
		margin-left: 11px;
		flex: 1 1 107px;
	}

	.image_11 {
		margin-left: 11px;
		flex: 1 1 107px;
	}
</style>
